<template>
  <div class="comprehensive-maintain-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="draggable-content content">
        <div class="header">
          <span class="title">模型设定</span>
          <div>
            <el-button
              v-if="hasTabSet"
              size="small"
              type="primary"
              @click="handleCancelSet">
              取 消
            </el-button>
            <el-button
              v-if="hasTabSet"
              size="small"
              type="primary"
              @click="updateModuleList">
              保 存
            </el-button>
          </div>
        </div>
        <div class="module-setting">
          <div class="module-list">
            <div
              class="module-item"
              v-for="(item, index) in moduleList"
              :key="item.moduleCode"
              :draggable="item.flag !== 'default'"
              @dragstart="leftDragstart($event, item, index)"
              @dragover="leftDragover($event, item, index)"
              @drop="leftDrop($event, item, index)">
              <img
                v-if="bgOptions[item.moduleCode]"
                class="module-bg"
                :src="bgOptions[item.moduleCode]"
                alt=""/>
              <i v-else class="iconfont iconmokuai"></i>
              <span class="name">{{ item.moduleName }}</span>
            </div>
          </div>
          <div class="icon-container">
            <i :class="['iconfont', 'iconright-long', dragType === 'left' ? 'active' : '']"></i>
            <i :class="['iconfont', 'iconleft-long', dragType === 'right' ? 'active' : '']"></i>
          </div>
          <div class="module-config">
            <div
              :class="['module-item', relatedIndex === index ? 'active' : '']"
              v-for="(item, index) in relatedList"
              :key="index"
              :draggable="item.flag !== 'default'"
              @dragstart="rightDragstart($event, item, index)"
              @dragover="rightDragover($event, item, index)"
              @dragleave="handleDragleave($event, item, index)"
              @drop="rightDrop($event, item, index)">
              <img
                v-if="bgOptions[item.moduleCode]"
                class="module-bg"
                :src="bgOptions[item.moduleCode]"
                alt=""/>
              <i v-else class="iconfont iconmokuai"></i>
              <span class="name">{{ item.moduleName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="header">
          <span class="title">模型管理</span>
          <el-button
            v-if="hasTabUpload && !tableData.length"
            size="small"
            type="primary"
            @click="handleShow('5')">
            上 传
          </el-button>
        </div>
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="projectTitel" label="模型名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span class="btn" @click="handleEdit(scope.row)">设置</span>
              <span class="btn" @click="handleDownLoad(scope.row, 'bim')">下载</span>
              <span class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="content">
        <div class="header">
          <span class="title">图片、视频管理</span>
          <el-button
            v-if="hasTabUpload"
            size="small"
            type="primary"
            @click="handleShow('4')">
            上 传
          </el-button>
        </div>
        <el-table
          class="table-content"
          v-loading="pictureTableLoading"
          element-loading-custom-class="custom-load"
          :data="pictureTableData"
          style="width: 100%">
          <el-table-column prop="projectTitel" label="模型名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span class="btn" @click="handleDownLoad(scope.row)">下载</span>
              <span class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
      </div>
<!--      <div class="content">-->
<!--        <div class="header">-->
<!--          <span class="title">倾斜摄影</span>-->
<!--          <el-button-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="handleShow('6')">-->
<!--            上 传-->
<!--          </el-button>-->
<!--        </div>-->
<!--        <el-table-->
<!--          class="table-content"-->
<!--          v-loading="tableLoading"-->
<!--          element-loading-custom-class="custom-load"-->
<!--          :data="obliqueTableData"-->
<!--          style="width: 100%">-->
<!--          <el-table-column prop="projectTitel" label="模型名称"></el-table-column>-->
<!--          <el-table-column label="操作">-->
<!--            <template slot-scope="scope">-->
<!--              <span class="btn" @click="handleDownLoad(scope.row, 'bim')">下载</span>-->
<!--              <span class="btn" @click="handleDelete(scope.row)">删除</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <div class="empty-content" slot="empty">-->
<!--            <i class="iconfont iconwushuju"></i>-->
<!--            <p>暂无数据</p>-->
<!--          </div>-->
<!--        </el-table>-->
<!--      </div>-->
      <div class="content">
        <div class="header">
          <span class="title">VR链接</span>
          <el-button
            v-if="hasTabUpload"
            size="small"
            type="primary"
            @click="handleShow('7')">
            上 传
          </el-button>
        </div>
        <el-table
          class="table-content"
          element-loading-custom-class="custom-load"
          :data="vrList"
          style="width: 100%">
          <el-table-column prop="projectTitel" label="名称"></el-table-column>
          <el-table-column prop="projectPath" label="链接地址"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span class="btn" @click="handleDownLoad(scope.row)">打开</span>
              <span class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
      </div>
    </main>
    <upload-home-file
      :visible="visible"
      :loading="loading"
      :accept="accept"
      :projectType="projectType"
      @cancel="visible = false"
      @submit="handleSubmit">
    </upload-home-file>
    <set-model-config
      :visible="configVisible"
      :options="config"
      :loading="btnLoading"
      @cancel="configVisible = false"
      @submit="handleSave">
    </set-model-config>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import uploadHomeFile from '@/components/project/comprehensive/uploadHomeFile';
import setModelConfig from '@/components/project/comprehensive/setModelConfig';
import progressBg from '../../../assets/images/project/progress_bg.png';
import outputBg from '../../../assets/images/project/output_bg.png';
import summationBg from '../../../assets/images/project/summation_bg.png';
import unitBg from '../../../assets/images/project/unit_bg.png';
import weatherBg from '../../../assets/images/project/weather.png';
import personnelBg from '../../../assets/images/project/personnel.png';
import towerBg from '../../../assets/images/project/towerBg.png';
import videoBg from '../../../assets/images/project/video_bg.png';
import qualityBg from '../../../assets/images/project/quality_bg.png';
import securityBg from '../../../assets/images/project/security_bg.png';
import monthNodeBg from '../../../assets/images/project/month_node_bg.png';
import securityClosedLoopBg from '../../../assets/images/project/security_closed_loop.jpeg';
import qualityClosedLoopBg from '../../../assets/images/project/quality_closed_loop.png';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        { name: '综合管理' },
        { name: '主页维护' }
      ],
      // 项目首页配置信息
      moduleList: [
        { moduleName: '项目概况', moduleCode: '1' },
        { moduleName: '参建单位', moduleCode: '2' },
        { moduleName: '天气情况', moduleCode: '3' },
        { moduleName: '人员管理', moduleCode: '4' },
        { moduleName: '进度管理', moduleCode: '5' },
        { moduleName: '塔吊监测', moduleCode: '6' },
        { moduleName: '产值统计', moduleCode: '7' },
        { moduleName: '视频监控', moduleCode: '8' },
        { moduleName: '安全类型', moduleCode: '9' },
        { moduleName: '质量类型', moduleCode: '10' },
        { moduleName: '本月节点', moduleCode: '11' },
        { moduleName: '质量整改', moduleCode: '12' },
        { moduleName: '安全整改', moduleCode: '13' },
      ],
      bgOptions: {
        '1': summationBg,
        '2': unitBg,
        '3': weatherBg,
        '4': personnelBg,
        '5': progressBg,
        '6': towerBg,
        '7': outputBg,
        '8': videoBg,
        '9': securityBg,
        '10': qualityBg,
        '11': monthNodeBg,
        '12': qualityClosedLoopBg,
        '13': securityClosedLoopBg
      },
      // 项目模块配置
      relatedList: [],
      moduleCache: [],
      relatedCache: [],
      dragType: '',
      // 模块id
      dragIndex: '',
      // 当前操作的模块
      dragModule: null,
      // 拖入区域的模块信息
      relatedModule: null,
      // 当前配置模块id
      relatedIndex: '',
      cacheModule: [],
      accept: '',
      // 上传类型
      projectType: '',
      visible: false,
      // 模型管理分页
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      loading: false,
      tableLoading: false,
      btnLoading: false,
      // 模型设置
      fileId: '',
      configVisible: false,
      config: null,
      // 倾斜摄影
      obliqueTableLoading: false,
      obliqueTableData: [],
      obliquePageNo: 1,
      obliquePageSize: 10,
      obliqueTotal: 0,
      // 图片、视频
      pictureTableLoading: false,
      picturePageNo: 1,
      picturePageSize: 10,
      pictureTotal: 0,
      pictureTableData: [],
      // VR链接
      vrList: []
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.accept = '';
      }
    },
    configVisible(val) {
      if (!val) {
        this.btnLoading = false;
        this.config = null;
      }
    }
  },
  created() {
    this.moduleCache = JSON.parse(JSON.stringify(this.moduleList));
    this.generateModule();
    this.getTableData();
    this.getTableData({
      projectType: '6'
    });
    this.getTableData({
      projectType: '4'
    });
    this.getTableData({
      projectType: '7'
    });
  },
  components: {
    Breadcrumb,
    uploadHomeFile,
    setModelConfig
  },
  methods: {
    async generateModule() {
      const { success, data: { data }} = await this.$Model.generateModule({
        projectId: this.projectId,
      });
      if (success && data) {
        this.relatedList = data && data.map(item => {
          const { moduleCode } = item;
          if (moduleCode) return item;
          return {
            ...item,
            flag: 'default'
          };
        });
        if (this.relatedList) {
          this.relatedCache = [...this.relatedList];
          this.moduleList = this.moduleCache.filter(({ moduleCode }) => {
            return !this.relatedCache.some(v => v.moduleCode === moduleCode);
          });
          this.setDefaultModule();
        }
      }
    },
    // 获取模型管理列表数据
    async getTableData(options = {}) {
      // projectType: 1新闻；2公告；3轮播图；4图片、视频管理；5模型管理；6倾斜摄影, 7 VR链接
      const params = {
        projectType: this.projectType || '5',
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        ...options
      };
      if (params.projectType === '5') {
        this.tableLoading = true;
      } else if (params.projectType === '6') {
        this.obliqueTableLoading = true;
      } else if (params.projectType === '4') {
        this.pictureTableLoading = true;
      }
      const { success, data: { data }} = await this.getCommonList(params);
      if (params.projectType === '5') {
        this.tableLoading = false;
      } else if (params.projectType === '6') {
        this.obliqueTableLoading = false;
      } else if (params.projectType === '4') {
        this.pictureTableLoading = false;
      }
      if (success && data) {
        const { list, total } = data;
        if (params.projectType === '5') {
          this.tableData = list || [];
          this.total = total || 0;
        } else if (params.projectType === '6') {
          this.obliqueTableData = list || [];
          this.obliqueTotal = total || 0;
        } else if (params.projectType === '4') {
          this.pictureTableData = list || [];
          this.pictureTotal = total || 0;
        } else if (params.projectType === '7') {
          this.vrList = list || [];
        }
      }
    },
    // 获取列表数据
    async getCommonList(params = {}) {
      return await this.$Model.getCommonList({
        projectType: this.projectType,
        projectId: this.projectId,
        ...params
      });
    },
    // 保存模块设置
    async updateModuleList() {
      const moduleSets = this.relatedList.map((item, index) => {
        // eslint-disable-next-line
        const { moduleCode, moduleName, flag, ...options } = item;
        return {
          ...options,
          moduleSort: index + 1,
          moduleCode,
          moduleName: moduleCode ? moduleName : ''
        };
      });
      const { success } = await this.$Model.updateModuleList(moduleSets);
      if (success) {
        this.generateModule();
        this.$message.success('保存成功');
      }
    },
    // 取消模块设置
    handleCancelSet() {
      this.relatedList = [...this.relatedCache];
      this.moduleList = [...this.moduleCache];
      this.clearDragData();
    },
    // 清楚拖拽数据
    clearDragData() {
      this.relatedIndex = '';
      this.dragIndex = '';
      this.relatedModule = null;
      this.dragModule = null;
      this.dragType = '';
    },
    // 模型列表拖拽
    leftDragstart(e, data, index) {
      this.dragModule = data;
      this.dragIndex = index;
      this.dragType = 'left';
    },
    leftDragover(e, data, index) {
      this.relatedIndex = index;
      e.preventDefault();
    },
    leftDrop(e, data, index) {
      this.relatedModule = data;
      if (this.dragType === 'right') {
        // 右侧切换到左侧
        const { moduleName, moduleCode } = this.dragModule;
        const spliceNum = data.flag === 'default' ? 1 : 0;
        this.moduleList.splice(this.relatedIndex, spliceNum, {
          moduleName,
          moduleCode
        });
        this.relatedList.splice(this.dragIndex, 1, {
          ...this.dragModule,
          moduleCode: '',
          moduleName: '',
          flag: 'default',
        });
        this.clearDragData();
        return;
      }
      // 左侧内部切换
      this.moduleList.splice(this.relatedIndex, 1, this.dragModule);
      this.moduleList.splice(this.dragIndex, 1, this.relatedModule);
      this.clearDragData();
    },
    handleDragleave(e, data) {
      this.relatedIndex = '';
    },
    // 模型页面配置拖拽
    rightDragstart(e, data, index) {
      this.dragModule = data;
      this.dragIndex = index;
      this.dragType = 'right';
    },
    rightDragover(e, data, index) {
      this.relatedIndex = index;
      e.preventDefault();
    },
    rightDrop(e, data, index) {
      this.relatedModule = data;
      if (this.dragType === 'right') {
        // 右侧切换模块
        this.relatedList.splice(this.relatedIndex, 1, this.dragModule);
        this.relatedList.splice(this.dragIndex, 1, this.relatedModule);
        this.clearDragData();
        return;
      }
      // 左侧往右切换模块
      if (this.relatedModule.moduleCode) {
        // 模块之间切换
        const { moduleCode, moduleName } = this.relatedModule;
        this.relatedList.splice(this.relatedIndex, 1, {
          ...this.relatedModule,
          ...this.dragModule,
          flag: ''
        });
        this.moduleList.splice(this.dragIndex, 1, {
          moduleCode,
          moduleName
        });
      } else {
        this.relatedList.splice(this.relatedIndex, 1, {
          ...this.relatedModule,
          ...this.dragModule,
          flag: ''
        });
        this.moduleList.splice(this.dragIndex, 1);
      }
      this.setDefaultModule();
      this.clearDragData();
    },
    setDefaultModule() {
      if (this.moduleList && this.moduleList.length) return;
      this.moduleList = [{
        moduleCode: '',
        moduleName: '',
        flag: 'default'
      }];
    },
    /**
     * 上传文件
     * @param {String} type: 类型
     */
    handleShow(type) {
      if (type === '5') {
        this.accept = '.rvt,.rfa,.dwg,.dxf,.skp,.ifc,.dgn,.obj,.stl,.3ds,.dae,.ply,.igms,.zip,.gtj,.bfcatzip';
      } else if (type === '4') {
        // 图片、视频管理
        this.accept = '.avi,.qt,.mov,.asf,.rm,.navi,.divx,.mpeg,.jpg,jpeg,.png';
      } else if (type === '6') {
        // 倾斜摄影
        this.accept = '.rvt,.rfa,.dxf,.skp,.ifc,.dgn,.obj,.stl,.3ds,.dae,.ply,.igms,.zip,.gtj,.bfcatzip';
      } else if (type === '7') {
        // 倾斜摄影
        this.accept = '.rvt,.rfa,.dxf,.skp,.ifc,.dgn,.obj,.stl,.3ds,.dae,.ply,.igms,.zip,.gtj,.bfcatzip';
      }
      this.projectType = type;
      this.visible = true;
    },
    // 设置模型基准点
    async handleEdit(row) {
      this.fileId = row.projectPath;
      const { success, data: { data }} = await this.$Model.getBimConfig({
        pageFlag: false,
        fileId: this.fileId
      });
      if (success && data) {
        const list = data.list || [];
        this.config = list[0];
        this.configVisible = true;
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    clearModel() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      this.loading = false;
      this.tableLoading = false;
    },
    // 下载
    async handleDownLoad(row, type) {
      const { projectPath } = row;
      if (!projectPath) {
        this.$message.warning('文件地址失效');
        return;
      }
      if (type === 'bim') {
        // bimface模型下载
        const { success, data: { data }} = await this.$Model.downLoadBimface({
          fileId: projectPath
        });
        if (success && data) {
          window.open(this.$checkUrl(data));
        }
        return;
      }
      window.open(this.$checkUrl(projectPath));
    },
    // 删除
    async handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteCommon({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.clearModel();
          this.getTableData();
        }
      });
    },
    // 模型管理上传
    async bimfaceUpload(options = {}) {
      const { projectTitel, file } = options;
      const fm = new FormData();
      fm.append('file', file);
      const params = {
        fileName: projectTitel,
        moduleType: '4', // 主页模型
        projectName: this.projectName,
        projectId: this.projectId,
        fileType: '0' // 是否模型联动(0：否；1：是)
      };
      return await this.$Model.bimfaceUpload({
        file: fm,
        ...params
      });
    },
    /**
     * 保存上传文件
     */
    async handleSubmit(options) {
      if (!options) return;
      const { projectTitel, file, path } = options;
      let result = {};
      let projectPath = '';
      let hasModel = ['5', '6'].includes(this.projectType);
      if (this.projectType === '7') {
        hasModel = false;
        result = {
          success: true,
          data: { data: true }
        };
      } else {
        const fm = new FormData();
        fm.append('file', file);
        this.loading = true;
        if (hasModel) {
          // 调用bimface文件上传接口
          result = await this.bimfaceUpload(options);
        } else {
          // 普通文件上传
          result = await this.$Model.fileUpload(fm);
        }
      }
      const { success, data: { data }} = result;
      if (success && data) {
        projectPath = this.projectType !== '7'
          ? hasModel ? data.fileId : data
          : path;
        const resp = await this.$Model.addCommon({
          projectId: this.projectId,
          projectPath,
          projectTitel,
          projectType: this.projectType
        });
        this.loading = false;
        if (resp.success) {
          this.$message.success('保存成功');
          this.getTableData();
          this.visible = false;
          return;
        }
        hasModel && this.$Model.fileDelete({
          filePath: data
        });
        return;
      }
      this.loading = false;
    },
    // 保存模型配置设置
    async handleSave(options) {
      const params = {
        ...options,
        fileId: this.fileId
      };
      if (this.config) params.id = this.config.id;
      this.btnLoading = true;
      const { success } = this.config
        ? await this.$Model.editBimConfig(params)
        : await this.$Model.setBimConfig(params);
      this.btnLoading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getTableData();
        this.configVisible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";

  .comprehensive-maintain-page {
    background-color: $baseBg;
    main {
      width: 100%;
      height: calc(100% - 40px);
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      > .content {
        width: 49.8%;
        height: 49.5%;
        background: $mainBg;
        border-radius: 10px;
        &.draggable-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .module-setting {
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            justify-content: space-between;
            padding: 0 10px 10px;
          }
          .icon-container {
            width: 50px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .iconfont {
              font-size: 34px;
              margin: 30px 0;
              &.active {
                color: $mainColor;
              }
              &:hover {
                color: $mainColor;
              }
            }
          }
          .module-list {
            width: 200px;
            height: 100%;
            overflow: auto;
            float: left;
            .drag-module-list {
              width: 100%;
              height: 100%;
              .module-item {
                margin-bottom: 5px;
                border-radius: 5px;
              }
            }
            .module-item {
              width: 100%;
              height: 25%;
              border: 1px solid transparent;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              transition: all .3s;
              position: relative;
              &[draggable=false] {
                border: 1px solid rgba(241, 241, 241, .1);
              }
              &:hover {
                border: 1px solid $mainColor;
                .iconmokuai {
                  color: rgba(241, 241, 241, .7);
                }
              }
              .module-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 5px;
              }
              .iconmokuai {
                transition: all .3s;
                font-size: 50px;
                color: rgba(241, 241, 241, .5);
              }
              .name {
                position: absolute;
                opacity: .7;
              }
            }
          }
          .module-config {
            width: calc(100% - 280px);
            height: 100%;
            background: url("../../../assets/images/project/project_bg.png") no-repeat;
            background-position: center top;
            background-size: cover;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            overflow: hidden;
            .drag-module-config {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              overflow: hidden;
            }
            .module-item {
              width: 35%;
              height: 25%;
              /*border: 1px solid rgba(241, 241, 241, .3);*/
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              transition: all .3s;
              position: relative;
              &.active {
                border: 1px solid $mainColor;
                .iconmokuai {
                  color: rgba(241, 241, 241, .7);
                }
              }
              &:hover {
                border: 1px solid $mainColor;
                .iconmokuai {
                  color: rgba(241, 241, 241, .7);
                }
              }
              .module-bg {
                position: absolute;
                width: 100%;
                height: 100%;
              }
              .iconmokuai {
                transition: all .3s;
                font-size: 50px;
                color: rgba(241, 241, 241, .5);
              }
              .name {
                position: absolute;
                opacity: .7;
              }
            }
          }
        }
        .header {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
        }
        .table-content {
          width: 100%;
          height: calc(100% - 50px);
          /deep/ .el-table__body-wrapper {
            height: 100%;
            padding-bottom: 46px;
            overflow-y: auto;
          }
          .btn {
            padding: 0 5px;
            cursor: pointer;
            color: $mainColor;
          }
        }
      }
    }
  }
</style>
